<template>
  <div class="container">
    <!-- 导航固定定位 fixed -->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()" />
    <!-- 文章列表 -->
    <van-list  @load="onLoad" v-model="loading" :finished="finished" finished-text="没有更多了">
      <van-cell-group>
        <van-cell v-for='item in list' :key='item.art_id.toString()'>
          <div class="article_item" @click='$router.push("/detail/" + item.art_id.toString())'>
            <h3 class="van-ellipsis">{{item.title}}</h3>
            <div class="img_box" v-if='item.cover.type===3'>
              <van-image class="w33" fit="cover" :src="item.cover.images[0]" />
              <van-image class="w33" fit="cover" :src="item.cover.images[1]" />
              <van-image class="w33" fit="cover" :src="item.cover.images[2]" />
            </div>
            <div class="img_box" v-else-if='item.cover.type===1'>
              <van-image class="w100" fit="cover" :src="item.cover.images[0]" />
            </div>
            <div class="info_box">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate}}分钟前</span>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>
<script>
import { searchArticles } from '@/api/channel.js'

export default {
  name: 'Result',
  props: ['kw'],
  data () {
    return {
      // 单次加载数据的状态
      loading: false,
      // 所有数据加载完成的标准
      finished: false,
      // 加载的数据列表
      list: [],
      // 查询参数
      filterParams: {
        page: 1,
        per_page: 10,
        q: ''
      },
      // 列表总数
      total: 0
    }
  },
  methods: {
    async onLoad () {
      // 分页加载数据
      try {
        const ret = await searchArticles(this.filterParams)
        this.list.push(...ret.data.results)
        this.total = ret.data.total_count
        this.loading = false
        // 加载完成一页数据后，页码需要累加
        this.filterParams.page += 1
        // 判断列表加载完成的标志
        if (this.list.length >= this.total) {
          // 没有更多数据了
          this.finished = true
        }
      } catch (e) {
        console.log(e)
        this.$toast.fail('加载数据失败！')
      }
    }
  },
  created () {
    // console.log(this.$route.query.kw)
    this.filterParams.q = this.kw
  }
}
</script>
<style scoped lang="less">
.container {
  padding-top: 46px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      height: 180px;
      width: 100%;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    span {
      padding-right: 10px;
    }
  }
}
</style>
